<template>
  <el-container>
    <div class="dtInfos rf white">
      <div class="dtInfosTab clearfix">
        <!-- 但是一旦没有hover 就会一个都不显示 -->
        <template class="lf clearfix" v-for="(place) in places">
          <!-- 读不到  places -->
          <!-- 传递参数 this. vue -->
          <!-- <li @mouseover="selectStyle (place,'places','hover') " :class="{'Hover':place.hover}"
          @mouseout="outStyle(place,'places','hover')" :key="place.id"> -->
          <li @mouseover="selectStyle (place) " :class="{'Hover':place.hover}" @mouseout="outStyle(place)" :key="place.id">
            <!--          不用this吗-->
            <!--            class="icon text-tag"-->
            <!--            tabindex vue  -->
            <!--            tabindex="place.tabindex"-->
            <!--            这个会让他不能显示， 并不是他原因 是v-show的问题 -->
            <!--            "text-tag" 没有这个class -->
            <!--            v-show="place.hover"-->
            <!--            @tabindex="place.tabindex" 这是没有用处的-->
            <!--            需要这样  :tabindex="place.tabindex"-->
            <span @click="windowOpen(place.url)" :tabindex="place.tabindex" class="text-tag">{{place.name}}</span>
            <!--            {{place.icon}}-->
          </li>
        </template>

        <!-- ————————————————
        版权声明：本文为CSDN博主「sunshine_ping」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
        原文链接：https://blog.csdn.net/sunshine_ping/article/details/80269707 -->
        <!-- <template v-for="(item) in items"> -->

        <!--        <ul class="lf clearfix">-->
        <!--          &lt;!&ndash; @mouseover="selectStyle (item) "  &ndash;&gt;-->
        <!--          &lt;!&ndash;          <li class=""><span onclick="windowOpen()"&ndash;&gt;-->
        <!--          &lt;!&ndash;                             tabindex="68" class="text-tag">国务院</span></li>&ndash;&gt;-->
        <!--          <li class=""><span onclick="window.open('http://www.gov.cn/pushinfo/v150203/index.htm')"-->
        <!--                             tabindex="68" class="text-tag">国务院</span></li>-->
        <!--          <li class=""><span onclick="window.open('http://www.zj.gov.cn/col/col1554467/index.html')"-->
        <!--                             tabindex="69" class="text-tag">省政府</span></li>-->
        <!--          <li class=""><span onclick="window.open('http://www.zj.gov.cn/col/col1554468/index.html')"-->
        <!--                             tabindex="70" class="text-tag">部门</span></li>-->
        <!--          <li class=""><span onclick="window.open('http://www.zj.gov.cn/col/col1554469/index.html')"-->
        <!--                             tabindex="71" class="text-tag">市</span></li>-->
        <!--          <li class="Hover"><span onclick="window.open('http://www.zj.gov.cn/col/col1554470/index.html')"-->
        <!--                                  tabindex="72" class="text-tag">县（市、区）</span></li>-->
        <!--        </ul>-->

        <!-- hover  其他的 ul 改变 vue  -->

        <!-- hidden 应该在最外面控制 -->
        <!-- 不行啊 外面控制的话 就要都列出来了 -->
        <div class="MoreBtns rf">

          <a href="http://www.gov.cn/pushinfo/v150203/index.htm" target="_blank" class="text-tag hidden" tabindex="73" title="更多>>">更多&gt;&gt;</a>

          <a href="/col/col1554467/index.html" target="_blank" class="hidden" title="更多>>">更多&gt;&gt;</a>

          <a href="/col/col1554468/index.html" target="_blank" class="hidden" title="更多>>">更多&gt;&gt;</a>

          <a href="/col/col1554469/index.html" target="_blank" class="hidden" title="更多>>">更多&gt;&gt;</a>

          <a href="/col/col1554470/index.html" target="_blank" class="" title="更多>>">更多&gt;&gt;</a>
        </div>
      </div>

      <!-- dtInfos data  infos  -->
      <!-- 列举 每个地方 -->
      <template class="dtInfosItem" v-for="(place) in places">
        <data-infos-wrap :place="place" :key="place.id"></data-infos-wrap>
        <!-- 多个 wrap  -->
      </template>

      <!-- <div class="dtInfosItem" ergodic="view">
        <div class="dtInfosWrap hidden">
          <ul class="gwyxx">

            <li><a href="http://www.gov.cn/premier/2021-08/25/content_5633325.htm" target="_blank" class="clearfix" title="李克强主持召开国务院常务会议 部署全面推动长江经济带...2021-08-25" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">李克强主持召开国务院常务会议 部署全面推动长江经济带...</span><span class="Days text-tag" tabindex="-1">2021-08-25</span></a></li>
            <li><a href="http://www.gov.cn/premier/2021-08/24/content_5633019.htm" target="_blank" class="clearfix" title="李克强主持召开国务院振兴东北地区等老工业基地领导小组...2021-08-24" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">李克强主持召开国务院振兴东北地区等老工业基地领导小组...</span><span class="Days text-tag" tabindex="-1">2021-08-24</span></a></li>
            <li><a href="http://www.gov.cn/premier/2021-08/24/content_5632985.htm" target="_blank" class="clearfix" title="李克强签署国务院令 公布《中华人民共和国市场主体登记...2021-08-24" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">李克强签署国务院令
                  公布《中华人民共和国市场主体登记...</span><span class="Days text-tag" tabindex="-1">2021-08-24</span></a></li>
            <li><a href="http://www.gov.cn/zhengce/content/2021-08/24/content_5632964.htm" target="_blank" class="clearfix" title="中华人民共和国市场主体登记管理条例2021-08-24" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">中华人民共和国市场主体登记管理条例</span><span class="Days text-tag" tabindex="-1">2021-08-24</span></a></li>
            <li><a href="http://www.gov.cn/guowuyuan/2021-08/26/content_5633611.htm" target="_blank" class="clearfix" title="韩正出席坚决遏制“两高”项目盲目发展电视电话会议并讲话2021-08-26" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">韩正出席坚决遏制“两高”项目盲目发展电视电话会议并讲话</span><span class="Days text-tag" tabindex="-1">2021-08-26</span></a></li>
            <li><a href="http://www.gov.cn/guowuyuan/2021-08/25/content_5633333.htm" target="_blank" class="clearfix" title="王勇代表党中央、国务院向东京残奥会中国体育代表团致贺电2021-08-25" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">王勇代表党中央、国务院向东京残奥会中国体育代表团致贺电</span><span class="Days text-tag" tabindex="-1">2021-08-25</span></a></li>
            <li><a href="http://www.gov.cn/guowuyuan/2021-08/26/content_5633414.htm" target="_blank" class="clearfix" title="王毅同埃塞俄比亚副总理兼外长德梅克通电话2021-08-26" tabindex="74" style="display: block;"><em></em><span class="Title text-tag" tabindex="-1">王毅同埃塞俄比亚副总理兼外长德梅克通电话</span><span class="Days text-tag" tabindex="-1">2021-08-26</span></a></li>
          </ul>
        </div> -->

    </div>
  </el-container>

</template>

<!--<style type="text/css" src="@/css/zj_index2.css">-->
<!--  /* <style zj_index2.css scoped> */-->
<!--</style>-->

<!--<style type="text/css" src="@/css/zj_index.css">-->
<!--  /* <style zj_index2.css scoped> */-->
<!--</style>-->

<style>
@import "../../css/zj_index.css";
@import "../../css/zj_index2.css";
</style>
<style scoped>
@media only screen and (min-width: 768px) {
  .white {
    /* backgroud-color: white; */
    background-color: white;
  }

  .clearfix {
    zoom: 1;
  }

  .clearfix:after {
    clear: both;
    content: "";
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
  }
}

.dtInfosWrap a:hover {
  color: #1492ff;
}

.dtInfosWrap a:hover .Title {
  color: #1492ff;
}

.dtInfosWrap li {
  margin-top: 18px;
}

.dtInfosWrap li > a {
  font-size: 16px;
}

.dtInfosWrap li > a > em {
  float: left;
  width: 4px;
  height: 4px;
  background-color: #1492ff;
  margin-top: 9px;
  margin-right: 8px;
}

.dtInfosWrap li > a > span.Title {
  float: left;
  color: #333;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dtInfosWrap li > a > span.Days {
  float: right;
  font-size: 14px;
  color: #999;
  margin-top: 2px;
}

.dtInfosWrap a:hover .Title {
  color: #1492ff;
}

/* .hover-show{

  } */

/* .lf {float: left;}
     .rf {float: right;}

  .dtInfosTab {
         border-bottom: 1px solid #ededed;
         padding: 0 8px;
     }
     .dtInfosTab li {
         float: left;
         font-size: 22px;
         color: #333;
         cursor: pointer;
         background: url(./sxss.png) left 5px no-repeat;
         padding: 0 16px;
     }
     .dtInfosTab li:first-child {
         background: 0;
         padding-left: 0;
     }
     .dtInfosTab li>span {
         display: block;
         padding-bottom: 13px;
         border-bottom: 4px solid transparent;
     }
     .dtInfosTab li.Hover span {
         border-color: #1492ff;
         font-weight: bold;
         color: #1492ff;
         cursor: pointer;
     } */
</style>

<script>
// 引入axios HTTP module to submit login form
// import {
//   isNull,
//   axiosRequest,
//   storageOperation
// } from '@/common/common'
// import {
//   commonConfig
// } from '@/config/commonConfig';

// import HoverShow from '@/components/HoverShow/HoverShow';

// 这样不能引入 组件
//  import {
//   HoverShow
// } from '@/HoverShow/HoverShow';

// 需要引入， 不引入好像也没事？
// 并不是 是需要引入的  之前是没刷新
// import data from '@/util/mock.js';
// 可以  但是这个data 是什么
// 是一整个mock 对象  其实叫做 Mock 更好吧
// 因为那边 export 了
// import Mock from '@/util/mock.js';
// console.log("data");
// console.log(data);

// require('@/util/mock.js');
// require 可以
// 这是正常的

// import data from 'src/util/mock.js';
// 从src 就错了
import DataInfosWrap from "@/components/DataInfosWrap/DataInfosWrap";
import Util  from "@/util/util";
// 需要 @ 引入吗
// 不用后缀嘛
export default {
  name: "HoverShow",
  // name: 'hover-show',
  // 这name 是不是没关系的啊
  // js hover
  data() {
    // xhr.js?74b8:160 POST http://10.50.75.111:9888/api/User/Login net::ERR_CONNECTION_TIMED_OUT
    // 局域网
    var validateUsrName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else callback();
    };
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else callback();
    };
    // mock js

    // ————————————————
    // 版权声明：本文为CSDN博主「sunshine_ping」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    // 原文链接：https://blog.csdn.net/sunshine_ping/article/details/80269707
    return {
      items: [
        { select: "第一行", icon: 1, hover: true },
        { select: "第二行", icon: 2, hover: false },
        { select: "第三行", icon: 3, hover: false },
        { select: "第四行", icon: 4, hover: false }
      ],
      // <li className=""><span onClick="window.open('http://www.gov.cn/pushinfo/v150203/index.htm')"
      //                        tabIndex="68" className="text-tag">国务院</span></li>
      // < li
      // className = "" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554467/index.html')"
      // tabIndex = "69"
      // className = "text-tag" > 省政府 < /span></
      // li >
      // < li
      // className = "" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554468/index.html')"
      // tabIndex = "70"
      // className = "text-tag" > 部门 < /span></
      // li >
      // < li
      // className = "" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554469/index.html')"
      // tabIndex = "71"
      // className = "text-tag" > 市 < /span></
      // li >
      // < li
      // className = "Hover" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554470/index.html')"
      // tabIndex = "72"
      // className = "text-tag" > 县（市、区）</span></li>

      //           <a :href="info.herf" target="_blank"
      //      class="clearfix" title="李克强主持召开国务院常务会议 部署全面推动长江经济带...2021-08-25" tabindex="74"
      //      style="display: block;"><em></em><span class="Title text-tag"
      //                                             tabindex="-1">李克强主持召开国务院常务会议 部署全面推动长江经济带...</span><span
      // class="Days text-tag"
      // tabindex="-1">2021-08-25</span></a>

      places: [
        {
          id: 1,
          select: "第一行",
          icon: 1,
          url: "http://www.gov.cn/pushinfo/v150203/index.htm",
          name: "国务院",
          tabindex: 68,
          infos: [
            {
              // 字符串带着 .. 就报错  vue
              id: 1,
              href: "http://www.gov.cn/premier/2021-08/25/content_5633325.htm",
              title:
                "李克强主持召开国务院常务会议 部署全面推动长江经济带...2021-08-25",
              // tabindex="74",
              // 错误 在这里写了等于号
              tabindex: "74",
              text: "李克强主持召开国务院常务会议 部署全面推动长江经济带...",
              date: "2021-08-25"
            }
          ]
        },

        {
          id: 2,
          select: "第一行",
          icon: 2,
          url: "http://www.zj.gov.cn/col/col1554467/index.html",
          name: "省政府",
          tabindex: 69,
          infos: [
            {
              // 字符串带着 .. 就报错  vue
              id: 1,
              href: "http://www.gov.cn/premier/2021-08/25/content_5633325.htm",
              title: "aaaaaa...2021-08-25",
              // tabindex="74",
              // 错误 在这里写了等于号
              tabindex: "74",
              text: "aaaaa...",
              date: "2021-08-25"
            }
          ]
        },
        {
          id: 3,
          select: "第二行",
          icon: 3,
          url: "http://www.zj.gov.cn/col/col1554468/index.html",
          name: "部门",
          tabindex: 70,
          infos: [
            {
              // 字符串带着 .. 就报错  vue
              id: 1,
              href: "http://www.gov.cn/premier/2021-08/25/content_5633325.htm",
              title: "bbbb...2021-08-25",
              // tabindex="74",
              // 错误 在这里写了等于号
              tabindex: "74",
              text: "bbbb...",
              date: "2021-08-25"
            }
          ]
        },
        {
          id: 4,
          select: "第三行",
          icon: 4,
          url: "http://www.zj.gov.cn/col/col1554469/index.html",
          name: "市",
          tabindex: 71
        },
        {
          id: 5,
          select: "第四行",
          icon: 5,
          url: "http://www.zj.gov.cn/col/col1554470/index.html",
          name: "县（市、区",
          tabindex: 72
        }
      ],
      postUrl: "1",
      firHeaderTle: "重点营运车辆动态信息",
      secHeaderTle: "公共监管与服务平台",
      labelPosition: "right",
      ruleForm2: {
        usrname: "",
        pass: ""
      },
      rules2: {
        usrname: [
          {
            validator: validateUsrName,
            trigger: "blur"
          }
        ],
        pass: [
          {
            validator: checkPass,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    windowOpen(url) {
      window.open(url);
    },
    selectStyle(item) {
      // console.log("selectStyle");

      var _this = this;
      // console.log("_this")
      // console.log(_this)
      // _this 是被选中的
      // 防止没有渲染出来吗
      this.$nextTick(function() {
        // console.log("this");
        // console.log(this);
        this.places.forEach(function(eachItem) {
          // console.log("_this in");
          // console.log(_this);
          // this.$set(item,'active',false);
          // 这样会没有
          // this.$get 没有的嘛
          // vue 获得一个 item 的 属性
          //  var   getVal=    eachItem.hover ;
          // var   getVal= _this.$get(eachItem, "hover");
          //  console.log("getVal");
          //    console.log(getVal);

          _this.$set(eachItem, "hover", false);

          // console.log("this in");
          // console.log(this);
        });

        // this 代表vue
        this.$set(item, "hover", true);
      });
      // 这个时候 还是全都是 false ,因为 nextTick
      // 那么怎么判断呢 如果全都是false 需要一个默认 true
      // console.log("this.items");
      // console.log(this.items);
    },

    // 那么只能 这个函数作为工具类,我这里写一个调用的额
    // selectStyle(item, lst, attrName) {
    //   // console.log("selectStyle");

    //   var _this = this;
    //   // console.log("_this")
    //   // console.log(_this)
    //   // _this 是被选中的
    //   // 防止没有渲染出来吗
    //   // var lst = this.$attrs[lstName];
    //   this.$nextTick(function() {
    //     // console.log("this");
    //     // console.log(this);
    //     lst.forEach(function(eachItem) {
    //       // console.log("_this in");
    //       // console.log(_this);
    //       // this.$set(item,'active',false);
    //       // 这样会没有
    //       // this.$get 没有的嘛
    //       // vue 获得一个 item 的 属性
    //       //  var   getVal=    eachItem.hover ;
    //       // var   getVal= _this.$get(eachItem, "hover");
    //       //  console.log("getVal");
    //       //    console.log(getVal);

    //       _this.$set(eachItem, attrName, false);

    //       // console.log("this in");
    //       // console.log(this);
    //     });

    //     // this 代表vue
    //     this.$set(item, attrName, true);
    //   });
    //   // 这个时候 还是全都是 false ,因为 nextTick
    //   // 那么怎么判断呢 如果全都是false 需要一个默认 true
    //   // console.log("this.items");
    //   // console.log(this.items);
    // },

    // outStyle(item, lst, attrName) {
    //   // console.log("lstName");
    //   // console.log(lstName);
    //   // console.log("outStyle");
    //   // this.$set(item, "hover", false);

    //   // 不能不失去样式  但是文章要不失去
    //   // var allFalse = true;
    //   // this.items.forEach(function(eachItem) {
    //   //   // _this.$set(eachItem, "hover", false);
    //   //   if (eachItem.hover === true) {
    //   //     allFalse = false;
    //   //   }
    //   // });
    //   // if (allFalse) {
    //   //   this.$set(item, "hover", true);
    //   // }

    //   // console.log("item");
    //   // console.log(item);
    //   // 这个怎么是true 了
    //   var cnt = 0;
    //   // 不能不失去样式  但是文章要不失去
    //   // var allFalse = true;
    //   // console.log("this.items");
    //   //    console.log(this.items);
    //   //  移开的时候 ,hover 没了嘛
    //   // 但是这里要set 但是取到的时候是false ,难道是不一样的取值方法
    //   // this.$set 的值 怎么取
    //   // 取不到 hover 值啊
    //   // console.log("this.$attrs");
    //   // console.log(this.$attrs);
    //   // 没东西的 确实
    //   // var lst = this.$attrs[lstName];
    //   for (let i = 0; i < lst.length; i++) {
    //     var eachItem = lst[i];
    //     //  var eachItem =    this.$attrs[lst];
    //     if (eachItem[attrName] === true) {
    //       cnt++;
    //       // allFalse = false;
    //     }
    //   }

    //   // this.items.forEach(function(eachItem) {
    //   //   // _this.$set(eachItem, "hover", false);
    //   //   if (eachItem.hover === true) {
    //   //     cnt++;
    //   //     // allFalse = false;
    //   //   }
    //   // });
    //   // 如果只有他一个 就不要消失

    //   // console.log("cnt");
    //   // console.log(cnt);
    //   if (cnt > 1) {
    //     // this.$set(item, attrName, false);
    //     this.$set(item, attrName, false);
    //   }

    //   // 之前一直再弄 items 但是我们维护的是 places 啊 ,我是傻逼
    //   // this.$nextTick(function() {
    //   //   // console.log("this");
    //   //   // console.log(this);
    //   //   console.log("this.items");
    //   //   console.log(this.items);
    //   //   this.items.forEach(function(eachItem) {
    //   //     // console.log("_this in");
    //   //     // console.log(_this);
    //   //     // this.$set(item,'active',false);
    //   //     // 这样会没有
    //   //     // this.$get 没有的嘛
    //   //     // vue 获得一个 item 的 属性
    //   //     //  var   getVal=    eachItem.hover ;
    //   //     // var   getVal= _this.$get(eachItem, "hover");
    //   //     //  console.log("getVal");
    //   //     //    console.log(getVal);
    //   //     // 注释
    //   //     // _this.$set(eachItem, "hover", false);
    //   //     // console.log("this in");
    //   //     // console.log(this);
    //   //   });

    //   //   // this 代表vue
    //   //   // 注释
    //   //   // this.$set(item, "hover", true);
    //   // });
    // },

    // selectStyleHover(item) {
    //   console.log("selectStyleHover");

    //   Util.methods.selectStyle(item, this.places, "hover", this);
    // },

// 算了 都是组件了 好像也不用这样封装
    // outStyleHover(item) {
    //   Util.methods. outStyle(item, this.places, "hover", this);
    // },

    outStyle(item) {
      // console.log("outStyle");
      // this.$set(item, "hover", false);

      // 不能不失去样式  但是文章要不失去
      // var allFalse = true;
      // this.items.forEach(function(eachItem) {
      //   // _this.$set(eachItem, "hover", false);
      //   if (eachItem.hover === true) {
      //     allFalse = false;
      //   }
      // });
      // if (allFalse) {
      //   this.$set(item, "hover", true);
      // }

      // console.log("item");
      // console.log(item);
      // 这个怎么是true 了
      var cnt = 0;
      // 不能不失去样式  但是文章要不失去
      // var allFalse = true;
      // console.log("this.items");
      //    console.log(this.items);
      //  移开的时候 ,hover 没了嘛
      // 但是这里要set 但是取到的时候是false ,难道是不一样的取值方法
      // this.$set 的值 怎么取
      // 取不到 hover 值啊

      for (let i = 0; i < this.places.length; i++) {
        var eachItem = this.places[i];
        if (eachItem.hover === true) {
          cnt++;
          // allFalse = false;
        }
      }

      // this.items.forEach(function(eachItem) {
      //   // _this.$set(eachItem, "hover", false);
      //   if (eachItem.hover === true) {
      //     cnt++;
      //     // allFalse = false;
      //   }
      // });
      // 如果只有他一个 就不要消失

      // console.log("cnt");
      // console.log(cnt);
      if (cnt > 1) {
        // this.$set(item, attrName, false);
        this.$set(item, "hover", false);
      }

      // 之前一直再弄 items 但是我们维护的是 places 啊 ,我是傻逼
      // this.$nextTick(function() {
      //   // console.log("this");
      //   // console.log(this);
      //   console.log("this.items");
      //   console.log(this.items);
      //   this.items.forEach(function(eachItem) {
      //     // console.log("_this in");
      //     // console.log(_this);
      //     // this.$set(item,'active',false);
      //     // 这样会没有
      //     // this.$get 没有的嘛
      //     // vue 获得一个 item 的 属性
      //     //  var   getVal=    eachItem.hover ;
      //     // var   getVal= _this.$get(eachItem, "hover");
      //     //  console.log("getVal");
      //     //    console.log(getVal);
      //     // 注释
      //     // _this.$set(eachItem, "hover", false);
      //     // console.log("this in");
      //     // console.log(this);
      //   });

      //   // this 代表vue
      //   // 注释
      //   // this.$set(item, "hover", true);
      // });
    }
  },
  components: {
    DataInfosWrap
  }
};
</script>
